<template>
	<el-row style="height: 11%">
		<el-col :span="24" class="tou-bu">
			sytht
			<div class="ding-bu">
				<div>
					<a href="/" target="_blank">前台首页</a>
				</div>
				<div class="deng-lu">
					<a href="/dengLu.html">{{yongHu}}<i class="el-icon-caret-bottom"></i></a>
					<div class="tui-chu" @click="tuiChu">退出</div>
				</div>
			</div>
		</el-col>
	</el-row>
	<el-row style="height: 89%">
		<el-col :span="3" class="ce-bian">
			<el-col :span="24">
				<el-menu default-active="2" 
				background-color="#3d6bc2"
				text-color="#fff"
				active-text-color="#72bdff"
				@open="daKai"
				@close="guanBi"
				@select="xuanZhong">
					<el-menu-item index="0">
						<i class="el-icon-setting"></i>
						<span>站点信息</span>
					</el-menu-item>
					<el-submenu index="1">
						<template #title>
							<i class="el-icon-menu"></i>
							<span>栏目</span>
						</template>
						<el-menu-item index="1-1">栏目列表</el-menu-item>
						<el-menu-item index="1-2">添加栏目</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template #title>
							<i class="el-icon-document"></i>
							<span>文章</span>
						</template>
						<el-menu-item index="2-1">文章列表</el-menu-item>
						<el-menu-item index="2-2">添加文章</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-col>
		</el-col>
		<el-col :span="21">
			<router-view></router-view>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		data() {
			return {
				yongHu: '',
			}
		},
		provide() {
			return {
				hang: ''
			}
		},
		inject: ['zhuJiDiZhi'],
		mounted() {
			let cookie = document.cookie;
			cookie.split(';').forEach( c => {
				let mingZi = c.trim().match(/^mingZi=(.*?)$/);
				if (mingZi) this.yongHu = mingZi[1];
			})
		},
		methods: {
			xuanZhong(key, keyPath) {
				switch (key) {
					case '0':
						this.$router.push('/zhanDianXinXi');
						break;
					case '1-1':
						this.$router.push('/lanMu');
						break;
					case '1-2':
						this.$router.push('/zengLanMu');
						break;
					case '2-1':
						this.$router.push('/wenZhang');
						break;
					case '2-2':
						this.$router.push('/zengWenZhang');
						break;
				}
			},
			tuiChu() {
				document.cookie = "yanZheng=; expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;";
				window.location.reload();
			},
			daKai(key, keyPath) {},
			guanBi(key, keyPath) {}
		}
	}
</script>

<style>
	.tou-bu {
		background-image:linear-gradient(178deg, #031f5b, #3f73c2);
		color: #ffffff;
		font-size: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.ding-bu {
		display: flex;
		position: absolute;
		justify-content: space-around;
		align-items: center;
		width: 150px;
		height: 30px;
		right:5%;
		top: 55%;
		z-index: 100;
		font-size: 14px;
	}
	.ding-bu a {
		color: #ffffff;
		text-decoration: none;
	}
	.tui-chu{
		position: absolute;
		top: 100%;
		text-align: center;
		width: 100%;
		height: 28px;
		background-color: #355fa1;
		display: none;
		border: 1px solid #0085c8;
		cursor: pointer;
	}
	.deng-lu {
		position: relative;
	}
	.deng-lu:hover .tui-chu{
		display: block;
	}
	.ce-bian {
		background-image:linear-gradient(to right, #031f5b, #355fa1);
		display: flex;
		justify-content: center;
	}
	.el-submenu {
		border-top: #9ebcfc 1px solid;
	}
	.el-submenu .el-menu-item {
		background-color: #427cda;
		width: 100%;
		border-top: #6082bc 1px solid;
		min-width: 0;
	}
	.el-menu {
		border: none;
	}
	.el-menu i {
		color: white;
	}
	.el-menu .is-active {
		background-color: #ffffff!important;
	}
</style>
